<script setup>
import { RouterView } from 'vue-router'
</script>

<template>
  <div id="app">
    <!-- 主要内容通过路由视图渲染 -->
    <RouterView />
  </div>
</template>

<style>
/* 全局CSS变量定义 */
:root {
  /* 主色调 - 紫色系 */
  --primary-color: #8a2be2;
  --purple-light: #b886d3;
  --purple-mid: #9370db;
  --purple-dark: #6a5acd;
  
  /* 辅助色 - 蓝色系 */
  --blue-light: #87ceeb;
  --blue-mid: #4682b4;
  --blue-dark: #2f4f4f;
  
  /* 金色系 - 保留但减少使用 */
  --gold-primary: #d4af37;
  --gold-secondary: #f0e68c;
  --gold-tertiary: #b8860b;
  --gold-light: #f5deb3;
  --gold-dark: #8B7D3B;
  --gold-muted: #e0c47c;
  
  /* 其他颜色 */
  --silver-light: #d3d3d3;
  --bronze-light: #cd7f32;
  --bg-dark: #1a1a1a; /* 恢复背景色亮度 */
  --bg-darker: #121212; /* 恢复深色背景 */
  --bg-light: #1e1e1e; /* 恢复浅色背景 */
  --bg-overlay: rgba(0, 0, 0, 0.7); /* 恢复遮罩透明度 */
  
  /* 正文字体颜色变量 - 多样化 */
  --text-primary: #ffffff;  /* 主要文字改为白色 */
  --text-secondary: #b886d3; /* 次要文字改为浅紫色 */
  --text-accent: #87ceeb;   /* 强调文本改为浅蓝色 */
  --text-tertiary: #d4af37; /* 保留金色作为第三强调色 */
  --text-muted: #888888;    /* 新增：柔和灰色文字 */
  
  /* 边框和阴影 */
  --border-color: #9370db;  /* 边框改为紫色 */
  --shadow-gold: 0 0 25px rgba(212, 175, 55, 0.6);
  --shadow-purple: 0 0 25px rgba(138, 43, 226, 0.6);
  --shadow-blue: 0 0 25px rgba(70, 130, 180, 0.6);
}

/* 全局样式重置 */
#app {
  max-width: 100%;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: var(--bg-darker); /* 添加应用背景色 */
}
</style>
